<?php
$translator = \Velacolib\Utility\Utility::translate();
?>
<link rel="stylesheet" href="<?php echo $this->basePath(); ?>/templates/front/css/topic_add.css">
<div class="page-header" id="banner" style="padding: 10px 0px">
    <div class="header-title-control"><b><?=$translator->translate('Edit')?></b> -> <?=$topic->title?></div>
</div>
<div class="content-body">
    <form action="/raovat/edit/<?=$topic->slug?>/<?=$topic->id?>" method="post" name="topic_add" accept-charset="utf-8" class="form require-validate">
        <?php if($result == true){
            echo '<div class="alert alert-success alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <strong>Success!</strong> cập nhật bài viết thành công!
                </div>';
        }?>
        <div class="row" style="">

            <div class="col-lg-6 col-sm-6 col-md-6" style="margin-top: 5px">
                <select class="form-control" name="cat_id">
                    <?php $cat = Velacolib\Utility\Utility::getCategoryArray(); ?>
                    <?php foreach($cat as $key_cat=>$val_cat){
                        ($topic->cat_id == $key_cat+1)?$select = 'selected="selected"':$select='';
                        ?>

                        <option <?php echo $select ?>  value="<?php echo $val_cat->id ?>"><?php echo $val_cat->title ?></option>
                    <?php } ?>
                </select>
            </div>
            <div class="col-lg-6 col-sm-6 col-md-6" style="margin-top: 5px">
                <select class="form-control" name="topic_location">
                    <?php $loc = Velacolib\Utility\Utility::getLocationArray(); ?>
                    <?php foreach ($loc as $k=>$c) {
                        ($topic->topic_location == $k)?$select = 'selected="selected"':$select='';
                        ?>
                        <option <?php echo $select ?> value="<?php echo $k ?>"><?php echo $c ?></option>
                    <?php } ?>
                </select>
            </div>
        </div>
        <div class="row" style="margin-top: 10px">
            <div class="col-sm-6 col-lg-6 col-md-6">
                <label class="checkbox-inline pull-left ">
                    <input <?php if($topic->topic_type == 1) echo 'checked="checked"'; ?> type="radio" name="topic_type" value="1"><?=$translator->translate('Buy')?>
                </label>
                <label class="checkbox-inline pull-left">
                    <input  <?php if($topic->topic_type == 0) echo 'checked="checked"'; ?>type="radio" name="topic_type" value="0"><?=$translator->translate('Sell')?>
                </label>
            </div>
            <div class="col-sm-6 col-lg-6 col-md-6 ">
                <label class="checkbox-inline pull-right">
                    <input <?php if($topic->is_brandnew == 1) echo 'checked="checked"'; ?> type="radio" name="is_brandnew" value="1"><?=$translator->translate('New')?>
                </label>
                <label class="checkbox-inline pull-right">
                    <input <?php if($topic->is_brandnew == 0) echo 'checked="checked"'; ?> type="radio" name="is_brandnew" value="0"> <?=$translator->translate('Old')?>
                </label>
            </div>
        </div>
        <div class="row" style="margin-top: 20px;margin-bottom: 20px">
            <div class="col-sm-8 col-lg-8 col-md-8">
                <div class="form-group group_validate">
                    <label><?=$translator->translate('Article title')?></label>
                    <input req="true" type="text" name="title" id="title" class="form-control input-sm" value="<?=$topic->title?>"  placeholder="">
                </div>
                <div class="form-group group_validate">
                    <label><?=$translator->translate('Price')?></label>
                    <input req="true" type="text" name="price" id="price-format" class="form-control input-sm price-format" placeholder="" value="<?=$topic->price?>"   >
                </div>
                <script>
                    $(function() {
                        $('.price-format').blur(function() {
                            $('.price-format').html(null);
                            $(this).priceFormat({
                                colorize: true,
                                negativeFormat: '-%s%n',
                                roundToDecimalPlace: 0,
                                symbol: '',
                                prefix: ' ',
                                suffix: '' ,
                                centsLimit:0 ,
                                thousandsSeparator: '.'
                            });
                        })
                            .keyup(function(e) {
                                var e = window.event || e;
                                var keyUnicode = e.charCode || e.keyCode;
                                if (e !== undefined) {
                                    switch (keyUnicode) {
                                        case 16: break; // Shift
                                        case 17: break; // Ctrl
                                        case 18: break; // Alt
                                        case 27: this.value = ''; break; // Esc: clear entry
                                        case 35: break; // End
                                        case 36: break; // Home
                                        case 37: break; // cursor left
                                        case 38: break; // cursor up
                                        case 39: break; // cursor right
                                        case 40: break; // cursor down
                                        case 78: break; // N (Opera 9.63+ maps the "." from the number key section to the "N" key too!) (See: http://unixpapa.com/js/key.html search for ". Del")
                                        case 110: break; // . number block (Opera 9.63+ maps the "." from the number block to the "N" key (78) !!!)
                                        case 190: break; // .
                                        default: $(this).priceFormat({ colorize: true, negativeFormat: '-%s%n', roundToDecimalPlace: -1, eventOnDecimalsEntered: true });
                                    }
                                }
                            })

                    });


                </script>
                <div class="form-group group_validate">
                    <label><?=$translator->translate('Expire date')?></label>
                    <p>Bài viết của bạn sẽ được đăng 30 ngày kể từ khi được duyệt!</p>
                </div>
                <div class="form-group group_validate">
                    <label><?=$translator->translate('Content')?></label>
                    <textarea req="true" name="full_description" id="full_description" rows="10" class="form-control input-sm richtext" placeholder="Nội dung bài viết"><?=$topic->full_description?></textarea>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-danger" id="submit" ><?=$translator->translate('Post')?></button>
                </div>
            </div>
            </form>
    <div  class="col-sm-4 col-lg-4 col-md-4 ">
        <label><?=$translator->translate('Image')?></label>
        <div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
        <?php foreach($topic_gellary as $img_gal){  ?>
            <input id="<?=$img_gal->id?>" type="hidden" name="gel[]" value="<?=$img_gal->link?>">
        <?php  } ?>
        <br/>
        <div id="gallery">
            <span class="btn btn-primary" id="pickfiles" href="javascript:;"><i  class="glyphicon glyphicon-plus "></i>[<?=$translator->translate('Select Image')?>]</span>
            <span class="btn btn-success" id="uploadfiles" href="javascript:;"><i class="glyphicon glyphicon-upload"></i>[<?=$translator->translate('Upload Image')?>]</span>
        </div>
        <div  id="listimage">

              <?php foreach($gallery_hidden as $img_gals){  ?>
                  <div dataid="<?=$img_gals->id?>" class="list-image-item">
                      <img src="<?=$img_gals->link?>" />
                      <i dataid="<?=$img_gals->id?>"  class="glyphicon glyphicon-trash "></i>
                  </div>
            <?php  } ?>
        </div>

    </div>

</div>

</div>
<!--<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>-->
<!-- <script  src="js/bootstrap.js"></script>  -->
<script type="text/javascript" src="<?php echo $this->basePath(); ?>/templates/front/js/pupload/plupload.full.min.js"></script>
<script type="text/javascript" src="<?php echo $this->basePath(); ?>/templates/front/js/price_format.js"></script>
<script type="text/javascript">
    // Custom example logic

    $(document).ready(function () {
        $(document).on('click','i',function(){
            var id = $(this).attr('dataid');
            $("div[dataid='"+id+"']").remove();
            $("input#"+id).remove();
      })  ;

        var uploader = new plupload.Uploader({
            runtimes: 'html5,flash,silverlight,html4',
            browse_button: 'pickfiles', // you can pass in id...
            container: document.getElementById('gallery'), // ... or DOM Element itself
            url: '/raovat/addtopicimg',
            flash_swf_url: 'js/pupload/Moxie.swf',
            silverlight_xap_url: 'js/pupload/Moxie.xap',

            rename: true,

            // Sort files
            sortable: true,

            // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
            dragdrop: true,

            // Views to activate
            views: {
                list: true,
                thumbs: true, // Show thumbs
                active: 'thumbs'
            },

            filters: {
                max_file_size: '10mb',
                mime_types: [
                    {title: "Image files", extensions: "jpg,gif,png"},
                    {title: "Zip files", extensions: "zip"}
                ]
            },

            init: {
                PostInit: function () {
                    document.getElementById('filelist').innerHTML = '';
                    document.getElementById('uploadfiles').onclick = function () {
                        //add parameter for upload (topic id, user id)
                        uploader.settings.multipart_params = {user_id:1 };
                        uploader.start();
                        return false;
                    };
                },

                FilesAdded: function (up, files,response) {
                    plupload.each(files, function (file) {
                        document.getElementById('filelist').innerHTML += '<div style="display: none" id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
                            '</div>';
                    });
                },

                FileUploaded: function(up, file, info) {
                    // Called when file has finished uploading   + '<input type="hidden" name="gel[]" value="'+file.name+'">'+
                    var i = 0;
                    $.each( info, function( key, value ) {
                        i++;    console.log(info);
                        var d = new Date();
                         id = d.getTime();
                        if(parseInt(i) == 1 ){
                            var input =   '<input id="'+id+'" type="hidden" name="gel[]" value="'+value+'">';
                            var imasge = '<div dataid="'+id+'" class="list-image-item"><img style="width: 98px;height: 80px" src="'+value+'" /><i dataid="'+id+'"   class="glyphicon glyphicon-trash"></i></div>';
                            $("#filelist").append(input);
                            $("#listimage").append(imasge);
                        }


                    } );
                },
                UploadComplete: function(up, files) {
                    // Called when all files are either uploaded or failed
                    //  console.log('[UploadComplete]');
                    $('.loading').hide();
                },
                UploadProgress: function (up, file) {
                    $('.loading').show();
                    document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
                },

                Error: function (up, err) {
                    document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
                }
            }
        });

        uploader.init();
    });


</script>
<script>
    // tinymce.init({selector: 'textarea'});
</script>